<template>
    <div class="ft_input">
      <input type="text" class="ft__input_input" :class="{question__input_input: question}" v-model="value">
    </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  watch: {
    value () {
      this.$emit('input', this.value)
    }
  },
  created () {
    if (this.values) this.value = this.values
  },
  props: {
    values: {
      type: String,
      default: ''
    },
    question: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
@import './../../assets/globalStyles/index.less';

.ft_input {
  .ft__input_input {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid @defaultBorderColor;
    box-sizing: border-box;
    border-radius: @defaultBorderRadius;
    font-size: @defaultFontSize;
    outline: none;
  }
  .question__input_input {
    padding: 12px 36px;
    .defaultQuestionRadius();
  }
}
</style>
